<template>
  <forms ref="forms" :config="config" @submit:forms="onsubmit" :btns="btns">
    <template v-slot:param="{row}">
      <input type="hidden" :name="row.name" :value="row.value">
      <ul style="width: 100%">
        <li class="flex" v-for="(v,k) in decode_json(row.value)">
          <p>{{k}}：{{v}}</p>
          <i ico="s94" class="ico-jia" style="transform: rotate(45deg)" @click="remove_param(k)" title="删除参数"></i>
        </li>
      </ul>
      <json_param :config="param_config" v-model:value="param_row"></json_param>
      <el-button type="primary" size="small" @click="add_param">添加参数</el-button>
    </template>
    <template #to_config="{row}">
      <el-button type="primary" @click="to_config">配置详情</el-button>
    </template>
  </forms>
</template>

<script>
import {ajax} from "@/js/api_tool.js";
import {iframe} from "@/js/tool.js";
import json_param from "@/components/auto_import/UnifyParam/json_param.vue";
import {_config} from "@/js/s94_tool.js";
import s94Mjs from "s94-js";

export default {
  components: {json_param},
  props: ['__iframe'],
  data(){
    let id = this.$get('id'), btns = undefined;

    let type_map = _config('status_alias_map.message_template.type');
    let forms_config = {
      title: {label:'标题',name:'title',type:'text_one',tips:'消息标题'},
      type: {label:'消息类型',name:'type',type:'select_one',config:type_map,tips:'',value:0},
      gateway: {label:'短信网关',name:'gateway',type:'select_one',config:[],tips:''},
      config: {label:'相关配置', name:'', type:'to_config'},
      template_code: {label:'模板code',name:'template_code',type:'text_one',tips:''},
      content: {label:'消息内容',name:'content',type:'text_more',tips:'参数使用{{参数名}}格式调用'},
      param: {label:'参数',name:'param',type:'param',tips:'',value:'{}'},
      url: {label:'跳转链接',name:'url',type:'text_one',tips:'点击消息后跳转的链接，微信模板 消息有效',value:''},
    }
    if (id){
      forms_config.create_time = {label:'创建时间',name:'create_time',tips:''};
    }
    if (this.$get('is_info')){
      s94Mjs.each(forms_config, function (row){ row.is_info = true; });
      btns = [];
    }
    return {
      id: id,
      btns: btns,
      config: forms_config,
      param_config: {
        key: {label:'参数名(键)',name:'key',type:'text_one'},
        title: {label:'参数标题',name:'title',type:'text_one'},
      },
      param_row: '{}',
    }
  },
  methods: {
    onsubmit(formData){
      let url = this.id ? `/admin/message_template/edit?id=`+this.id : '/admin/message_template/add';
      ajax({url:url, method:'POST', data:formData}, (res)=>{
        if (this.__iframe){
          iframe.exe('message_template/index', '$refs.list_url.list');
          iframe.hide('message_template/edit');
          if (!this.id) this.$refs['forms'].init();
        }else {
          this.$router.push('index');
        }
      }, (res)=>{
        if (res.errors) this.$refs['forms'].errors = res.errors;
      })
    },
    to_config(){
      let type = s94Mjs.to_string(this.config.type.value);
      let key = '';
      if (type === '1'){
        key = 'message.wechat';
      }else {
        let gateway = this.config.gateway.value;
        if (gateway) key = 'message.'+gateway;
      }
      if (key) iframe(`config_group/index?full_name=${key}`);
    },
    decode_json(json){
      return JSON.parse(json);
    },
    add_param(){
      let row = JSON.parse(this.param_row);
      if (!row.key || !row.title) return this.$message.error('参数名和参数标题必填');
      let old = JSON.parse(this.config.param.value);
      old[row.key] = row.title;
      this.config.param.value = JSON.stringify(old);
      this.param_row = '{}';
    },
    remove_param(k){
      let old = JSON.parse(this.config.param.value);
      delete old[k];
      this.config.param.value = JSON.stringify(old);
    },
  },
  watch:{
    'config.type.value'(v,oldV){
      this.config.gateway.remove = (v==1);
    },
    'config.gateway.value'(v,oldV){
      this.config.gateway.tips = `相关配置`
    },
  },
  mounted() {
    let app = this;
    if (!this.__iframe) window['app'] = this;
    if (this.id) {
      ajax({url:'/admin/message_template/info?id='+this.id, cache:true}, (res)=>{
        this.$refs['forms'].init(res.data);
        return false;
      }, ()=>{
        if (this.__iframe){
          iframe.remove('message_template/edit');
        }else {
          this.$router.push('index');
        }
      })
    }

    //其他初始化操作
    ajax({url:'/admin/message_template/config_map',cache:true},(res)=>{
      this.config.gateway.config = res.data['gateway'];
      return false
    })
  }
}
</script>
